<div style="position: relative; background: #ffffff; padding: 8px 24px; border-radius: 8px;">

  <div style="position: absolute; top: 14px; right: 24px; display: flex; align-items: center;">
  <span style="display: flex; align-items: center; margin-right: 8px;">
    <span style="font-size: 16px; margin-right: 4px;">🔄</span>
  </span>

    <!-- 状态下拉框 -->
    <nz-select [(ngModel)]="studyInfo.statusName" name="studyInfo.statusName" style="width: 100px;" size="small" nzPlaceHolder="选择状态">
      <!-- 渲染从后端返回的状态列表 -->
      <nz-option *ngFor="let status of status" [nzValue]="status.id" [nzLabel]="status.statusName"></nz-option>
    </nz-select>
  </div>


  <form nz-form style="margin: 5px 0;">
  <!-- 标题 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="2" nzRequired nzFor="email">
      <span style="font-weight: bold; font-size: 20px;">📝 标题</span>
    </nz-form-label>

    <nz-form-control [nzSpan]="10">
      <input nz-input [(ngModel)]="studyInfo.name" name="studyInfo.name" style="width: 300px;"/>
    </nz-form-control>
  </nz-form-item>

  <!-- 日期 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="2" nzRequired>📅 日期</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <nz-date-picker [(ngModel)]="studyInfo.logDate" name="studyInfo.logDate"></nz-date-picker>
    </nz-form-control>
  </nz-form-item>

  <!-- 分类 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="2" nzRequired>分类</nz-form-label>
    <nz-form-control [nzSpan]="6">
      <nz-select
        [nzDropdownRender]="renderTemplate"
        [(ngModel)]="studyInfo.categoryName"
        nzPlaceHolder="选择或添加"
        name="studyInfo.categoryName"
        [nzShowSearch]="true"
        [nzAllowClear]="true"
        [nzAutoClearSearchValue]="false"
        (nzOnSearch)="onSearchInput($event)"
        style="width: 100%;"
      >
        <nz-option
          *ngFor="let item of categories"
          [nzLabel]="item.categoryName"
          [nzValue]="item.categoryName"
          [nzCustomContent]="true"
        >
          <div style="display: flex; width: 100%; place-items: center">
            <div>{{ item.categoryName }}</div>
            <i
              nz-icon
              nzType="close"
              style="font-size: 12px; color: black; margin-left: auto; margin-right: 8px; width: 16px; cursor: pointer;"
              (click)="deleteCategory(item); $event.stopPropagation()">
            </i>
          </div>
        </nz-option>
      </nz-select>

      <ng-template #renderTemplate>
        <nz-divider></nz-divider>
        <div style="display: flex; margin: 6px 12px; place-items: center">
          <input type="text" nz-input #inputElement style="width: 200px" />
          <a class="add-item" (click)="addItem(inputElement)"
             style="margin-left: 3px; width: 40px; height: 20px; font-size: 25px; display: flex; align-items: center; justify-content: center; background-color: transparent; border-radius: 4px;">
            +
          </a>
        </div>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <!-- 标签 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="2" nzRequired>🏷️ 标签</nz-form-label>
    <nz-form-control [nzSpan]="7">
      <div style="display: flex; align-items: center; gap: 8px;">
        <nz-select
          nzMode="tags"
          nzPlaceHolder="输入"
          [(ngModel)]="studyInfo.tagName"
          name="studyInfo.tagName"
          [nzShowSearch]="true"
          (ngModelChange)="handleTagModelChange($event)"
          style="flex: 1;"
        >
          <nz-option
            *ngFor="let item of tags"
            [nzLabel]="item.tagName"
            [nzValue]="item.tagName"
          ></nz-option>
        </nz-select>

        <button nz-button nzType="primary" (click)="showModal1()">🗑️管理</button>
      </div>
    </nz-form-control>
  </nz-form-item>


  <!-- 内容 -->
  <nz-form-item>
    <nz-form-label [nzSpan]="2" nzRequired>内容</nz-form-label>
  </nz-form-item>
  <div>
    <angular-editor [(ngModel)]="studyInfo.content" name="studyInfo.content" [config]="editorConfig"></angular-editor>
  </div>
  <br />

  <!-- 操作按钮 -->
  <div style="display: flex; justify-content: space-between;">
    <!-- 左边：返回按钮 -->
    <button
      nz-button
      nzType="primary"
      (click)="backToList()"
      style="border-radius: 8px"
    >
      返回
    </button>

    <!-- 右边：提交按钮 -->
    <button
      nz-button
      nzType="default"
      (click)="add()"
      [ngStyle]="{
      'border': '1px solid #ff4d4f',
      'color': '#ff4d4f',
      'background-color': '#ffffff',
      'border-radius': '8px'
    }"
    >
      提交
    </button>
  </div>

 </form>
</div>

<nz-modal [(nzVisible)]="isVisible" nzTitle="标签管理" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <div *nzModalContent>
    <ul style="list-style: none; padding: 0; margin: 0;">
      <li
        *ngFor="let tag of tags"
        style="display: flex; justify-content: space-between; align-items: center; padding: 4px 0;"
      >
        <span>{{ tag.tagName }}</span>
        <i
          nz-icon
          nzType="close"
          style="cursor: pointer; color: #000000;"
          (click)="deleteTag(tag)"
        ></i>
      </li>
    </ul>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button nz-button nzType="primary" [nzLoading]="isConfirmLoading" (click)="handleOk()">确认</button>
  </div>
</nz-modal>





